<template>
  <PageContainer>
    <Header title="文件上传限制" />
    <view>
      <view class="hb-m-4 hb-py-3 hb-px-4 hb-bg-white hb-box-shadow-base hb-rounded-xl">
        <TmText _class="hb-font-bold hb-mb-2" label="谁可以调用" :font-size="28" />
        <view class="hb-py-2">
          <!-- 私密 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileUploadPolicyEnum.ALL_MEMBERS)"
          >
            <CustomRadio :checked="fileUploadPolicy === FileUploadPolicyEnum.ALL_MEMBERS" />
            <TmText label="所有成员" :font-size="24" />
            <TmText label="所有加入圈子的成员均可上传" color="#969799" :font-size="24" />
          </view>
          <!-- 公开 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileUploadPolicyEnum.ADMINS_ONLY)"
          >
            <CustomRadio :checked="fileUploadPolicy === FileUploadPolicyEnum.ADMINS_ONLY" />
            <TmText label="仅管理员" :font-size="24" />
            <TmText label="仅管理员可以上传" color="#969799" :font-size="24" />
          </view>
          <!-- 部分可调用 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileUploadPolicyEnum.CUSTOM)"
          >
            <CustomRadio :checked="fileUploadPolicy === FileUploadPolicyEnum.CUSTOM" />
            <TmText label="部分成员可上传" :font-size="24" />
          </view>
          <!-- 指定权限 -->
          <view class="hb-ml-7 hb-rounded-lg hb-bg-[#F7F8FA]">
            <view
              class="permission-wrapper"
              :class="{ expanded: fileUploadPolicy === FileUploadPolicyEnum.CUSTOM }"
            >
              <!-- 选择好友 -->
              <view class="hb-p-3 hb-border-b hb-border-solid hb-border-[#EBEDF0]">
                <view class="hb-flex hb-items-center hb-flex-wrap hb-gap-2 hb-mb-2">
                  <TmImage
                    v-for="(item, index) in selectedMembers"
                    :key="index"
                    :src="item.content"
                    :width="72"
                    :height="72"
                    :round="2"
                  />
                </view>
                <TmButton
                  icon="tmicon-plus"
                  :margin="[0, 0, 0, 16]"
                  :width="200"
                  :height="60"
                  outlined
                  :border="1"
                  color="primary"
                  label="选择成员"
                  :font-size="24"
                  :round="12"
                  @click="handleSelectMembers"
                />
                <TmText label="选中的成员可上传" color="#969799" :font-size="24" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <BottomSubmit submit-btn-label="保存设置" @submit="handleSaveSetting" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* circleFileUploadLimit 圈子文件上传限制 */
  import { saveFileUploadPerm, circleFileUploadLimitMemberList } from '@/api/contact';
  import { CircleMemberListResult } from '@/api/contact/types';
  import { FileAuthInfo } from '@/api/knowledgeBase/types';
  import { FileUploadPolicyEnum } from '@/enums/PublicEnum';
  import { CircleFileUploadLimit } from '@/router/types/modules';
  import { Toast } from '@/utils';

  const fileUploadPolicy = ref<FileUploadPolicyEnum>(FileUploadPolicyEnum.ALL_MEMBERS);
  let success: CircleFileUploadLimit['success'];
  const selectedMembers = ref<FileAuthInfo[]>([]);
  const circlesId = ref<number>(0);
  customOnload<'circleFileUploadLimit'>((op) => {
    fileUploadPolicy.value = op.fileUploadPolicy;
    success = op.success;
    circlesId.value = op.id;
    circleFileUploadLimitMemberList({ id: circlesId.value }).then((res) => {
      selectedMembers.value = res;
    });
  });

  function handleChangePermission(permission: FileUploadPolicyEnum) {
    fileUploadPolicy.value = permission;
  }

  function handleSelectMembers() {
    navigateTo({
      name: 'selectMembers',
      options: {
        id: circlesId.value,
        type: 'member',
        selected: selectedMembers.value.map((item) => item.id),
        success: (data: CircleMemberListResult[]) => {
          selectedMembers.value = data.map((item) => ({
            id: item.id,
            content: item.iconFileUrl,
          }));
        },
      },
    });
  }

  function handleSaveSetting() {
    const memberIds = selectedMembers.value.map((item) => item.id);
    if (memberIds.length === 0 && fileUploadPolicy.value === FileUploadPolicyEnum.CUSTOM) {
      Toast('请选择成员');
      return;
    }
    saveFileUploadPerm({
      id: circlesId.value,
      fileUploadPolicy: fileUploadPolicy.value,
      memberIds: fileUploadPolicy.value === FileUploadPolicyEnum.CUSTOM ? memberIds : [],
    }).then(() => {
      success?.({
        fileUploadPolicy: fileUploadPolicy.value,
      });
      Toast({
        title: '保存成功',
        success: () => navigateBack(),
      });
    });
  }
</script>

<style lang="scss" scoped>
  /* 内容样式 */
  .permission-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, transform 0.3s ease;

    &.expanded {
      max-height: 2000px; /* 足够大的值以容纳内容 */
      opacity: 1;
      transform: translateY(0);
      transition: max-height 1s ease-in-out, opacity 0.5s ease, transform 0.5s ease;
    }
  }
</style>
